<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>一个前端初学者的历程</title>
    <link rel="stylesheet" href="css/comment.css"/>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    </script>
</head>
<body>
<!--导航开始-->
<div class="header">
    <div class="nav">
        <div class="nav_a">
            <div class="nav_left" >
                <h1>黑马</h1>
            </div>
            <div class="nav_right">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="wenzhang.html">文章</a></li>
                    <li><a href="guanyuwo.html">关于我</a></li>
                    <li><a href="">前端导航</a></li>
                    <li><a href="comment.html">留言</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--导航结束-->
<!--内容开始-->
    <div class="main">
        <!-- 左边栏开始-->
        <div class="main_left">
            <img src="img/010.png" alt=""/>
            <div class="main_header">
                <a href="#">首页</a>
                >
                <span>留言板</span>
            </div>
            <div class="reping">
                <h2>评论</h2>
                <div class="pinglun">
                    <div class="touxiang">
                        <img src="img/011.png" alt=""/>
                    </div>
                    <div class="article">
                        <h3>黑马</h3>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;这是我的人生之中第一个博客，也是第一个留言板，也是第一个留言，还是亲自写的，虽然很丑，但是
                            很有价值，嗯！就这样！
                        </p>
                        <div class="huifu">
                            <span class="ds-time" datetime="2016-04-07T21:05:44+08:00" title="2017年3月1日
                            下午2:05:44">2017年3月1日</span>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <a class="ds-post-reply" href="javascript:void(0);">回复</a>
                        </div>
                    </div>
                </div>
                <div class="pinglun">
                    <div class="pinglun">
                        <div class="touxiang">
                            <img src="img/011.png" alt=""/>
                        </div>
                        <div class="article">
                            <h3>黑马</h3>
                            <p>&nbsp;&nbsp;&nbsp;&nbsp;这是我的人生之中第一个博客，也是第一个留言板，也是第一个留言，还是亲自写的，虽然很丑，但是
                                很有价值，嗯！就这样！
                            </p>
                            <div class="huifu">
                            <span class="ds-time" datetime="2016-04-07T21:05:44+08:00" title="2017年3月1日
                            下午2:05:44">2017年3月1日</span>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <a class="ds-post-reply" href="javascript:void(0);">回复</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="article" >
                    <input type="text" style="width: 670px;height: 150px">
                    <div>
                        <button>留言</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 左边栏结束-->
        <!-- 右边栏开始-->
        <div class="main_right">
            <div class="personal">
                <div class="personal_a">
                    <h2>关于兔子博客</h2>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;<span>兔子</span>博客，是我的个人技术博客主要记录和总结前端工作中常
                        用的知识及我的生活。
                    </p>
                    <p><span>&nbsp;&nbsp;&nbsp;&nbsp;本博客所有内容若需转载请联系我。</span></p>
                    <h3>联系方式</h3>
                    <div class="qq">
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
                            <img border="0"img src="http://pub.idqqimg.com/wpa/images/counseling_style_52.png"
                                 title="点击这里给我发消息" class="logo_img">
                        </a>
                    </div>
                </div>
            </div>
            <div class="fain">
                <h2>关键词搜索</h2>
                <div class="wc">
                    <input type="text" class="search-text" name="keyword" value="" placeholder="请输入关键词" style="width: 200px;height: 30px">
                    <input type="submit" value="搜索" class="search-btn" style="width: 60px;height: 30px;background-color: #2980b9" >
                </div>
            </div>
            <div class="a_friend">
                <h2>友情链接</h2>
                <div class="lj">
                    <ul>
                        <li><a href="#">前端技术</a></li>
                        <li><a href="#">web前端开发</a></li>
                        <li><a href="#">蘑菇房</a></li>
                        <li><a href="#">建站素材</a></li>
                        <li><a href="#">编程入门</a></li>
                        <li><a href="#">网站建设</a></li>
                        <li><a href="#">web前端</a></li>
                    </ul>
                </div>

            </div>
        </div>
        <!-- 右边栏结束-->
    </div>
<!--内容结束-->
<!--尾部开始-->
    <div class="footer">
        <div class="footer_a">
            <span>我的：</span>
            <a href="https://www.baidu.com/">百度</a>
            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
            <a href="http://huaban.com/">花瓣网</a>
            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
            <a href="http://www.nipic.com/index.html">昵图</a>
            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
            <a href="http://lol.qq.com/">lol</a>
            <p>
                sdnasjkdhlasoidaskjdbuasidnbaskdbashduiasndkajsdnluas
            </p>

        </div>
    </div>
<!--尾部结束-->
</body>
</html>